<script lang="ts" name="person-new" setup>
//reactive 只能定义对象类型数据
//ref 能定义基础数据类型,也能定义对象类型数据
//表面上是用的ref 底层是用reactive定义的对象
import {reactive, ref} from "vue";

//数据
let car = ref({
  brand: '奔驰',
  price: 100
})
let games = ref([
  {id: 'abc01', name: '王者荣耀'},
  {id: 'abc02', name: '原神'},
  {id: 'abc03', name: '三国志'}
])
let obj = reactive({age: 24})
console.log(car)
console.log(obj)


// console.log(car) //Proxy(Object) {brand: '奔驰', price: 100}

//方法
function changePrice() {
  car.value.price += 10
}

function changeFirstGameName() {
  games.value[0].name = '流星蝴蝶剑'
}

</script>

<template>
  <div class="person">
    <h2>一辆{{ car.brand }}车,价值{{ car.price }}</h2>
    <button @click="changePrice">修改汽车的价格</button>
    <hr>
    <h2>游戏列表</h2>
    <ul>
      <li v-for="item in games" :key="item.id">{{ item.name }}</li>
    </ul>
    <button @click="changeFirstGameName">修改第一个游戏名字</button>
  </div>
</template>

<style scoped>
.person {
  background-color: skyblue;
  box-shadow: 0 0 10px;
  border-radius: 10px;
  padding: 20px;
}

button {
  margin: 0 15px;
}

li {
  font-size: 20px;
}
</style>